Développement d’applications de supervision et de monitorage¶

Async & Await¶

Problème¶

Il n'y a pas de "sleep" en javascript¶

  1. Il n'y a pas de moyen d'attendre en javascript

  2. Tout est executé sur le champ

  3. Il n'y a que le even loop qui à le droit de ne rien faire

Pis un serveur, ça dort souvant¶

  1. Lorsqu'on ouvre un fichier

  2. Lorsqu'on fait une "request" à quelque chose

  3. Lorsqu'on retourne une response

  4. Et à plein d'autre place

Le meilleur analogie c'est le foodtruck¶

  1. une file
  2. les gens attendent leur bouffe
  3. super optimisé

Sleep en javascript¶

function sayHello(){
    console.log("Hello world");
}

setTimeout(sayHello, 1000);
  1. La clé est le sayHello dans setTimeout(sayHello, 1000);. Ceci est un callback

Callback Hell¶

function sayBye() {
    console.log("Good Bye Mate.");
}
function sayHello(){
    console.log("Hello world");
    setTimeout(sayBye, 1000)
}

setTimeout(sayHello, 1000)

Rapidement, du mauvais code avec des callback... devient un "callback hell"

http://callbackhell.com¶

Les Promises...¶

Idée de Génie¶

au lieu de prendre les callbacks en arguments, les fonctions devraient retourner un petit objet qui possède une fonction next.

import delay from "https://esm.sh/delay@6.0.0";

function sayHello(){
    console.log("Hello world");
}

delay(1000).then(sayHello)

Où que c'est cool c'est que c'est chaînable¶

import delay from "https://esm.sh/delay@6.0.0";

function sayHello(){
    console.log("Hello world");
}

function sayBye() {
    console.log("Good Bye Mate.");
}

delay(1000)
  .then(sayHello)
  .then(sayBye)

Où que c'est cool c'est que c'est chaînable (encore plus)¶

import delay from "https://esm.sh/delay@6.0.0";
function sayHello(){
    console.log("Hello world");
}

function sayBye() {
    console.log("Good Bye Mate.");
}

function wait1Seconds(){
    return delay(1000);
}

delay(1000)
  .then(sayHello)
  .then(wait1Seconds)  
  .then(sayBye)

Documentation¶

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Mais ça reste un peu chient¶

Asyn / Await¶

Objectif: simplifier l'utilisation des promises¶

  1. les promises sont utilisées partout

  2. Finalement, l'API est finale

  3. D'autre languages ont fait des choses cool

Crash Course:¶

import delay from "https://esm.sh/delay@6.0.0";

function sayHello(){
    console.log("Hello world");
}

function sayBye() {
    console.log("Good Bye Mate.");
}

async function wait1Seconds() {
    await delay(1000);
}

await delay(1000);
sayHello();
await wait1Seconds()
sayBye()

Top idée¶

Au lieu de faire .then on utilise await. Le reste du code est pareil-ish.¶

  • Donc, on peut await-er tout ce qui retourne une promise.

Où peut-on utiliser await?¶

  1. Dans le top level d'un module

  2. Dans une fonction qui est async

Async function¶

async function wait1SecondsAndReturn1() {
    await delay(1000);
    return 90;
}

  1. Si une fonction est async, automatiquement la valeur de retour sera wrappé dans une Promise

  2. 99.9% du temps que nous crérons des Promise, ce sera via async/await

Fetch!¶

L'api pour faire des requêtes HTTP¶

const url = "https://didier-ahuntsic.gitlab.io/cours-420-317-ah/data/grades.json";
const resp = await fetch(url);
const payload = await resp.json();

console.log(payload);

Fetch est supporté sur toutes les platformes¶

  • nodejs

  • browser

  • deno

  • bun

  • mon micro-ondes

Sécurité¶

Malheureusement pour nous, il est souvant défendu de "fetcher" un url dans le navigateur. Vois:

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Attention!¶

Le reste de la présentation est à propos de deno¶

Lire et écrire des fichiers¶

Warning¶

Ceci est specific à deno. Pour nodejs, le nom de la fonction est différente. Dans le browser, il n'y a pas de fichiers¶

(Mais, l'idée est la même)

Lire un fichier text pour les fous...¶

import * as path from "https://deno.land/std@0.202.0/path/mod.ts";

const home = Deno.env.get("HOME");
if(home === undefined){
    throw new Error("home not found");
}
const filePath = path.join(home, "tailor.json")

const text = await Deno.readTextFile(filePath);
console.log(text);

Lire un fichier text pour les moins fou¶

const text = await Deno.readTextFile("/dev/null");
console.log(text);
  1. En gros, Deno.readTextFile retourne une promise de string

Écrire un fichier¶

const filePath = "/dev/null";
const content = "merci dev null d'exister";
await Deno.writeTextFile(filePath, content);

Exercices¶

Télécharger un fichier¶

Télécharger https://didier-ahuntsic.gitlab.io/cours-420-317-ah/data/grades.json dans un fichier sur votre ordinateur

Delay downloads¶

Écrire une fonction qui reçoit une liste d'url et qui télécharge tous les urls en attendant 1 seconde entre chaque téléchargement

Télécharger tous les fichiers¶

Télécharger tous les fichiers inscript sur https://didier-ahuntsic.gitlab.io/cours-420-317-ah/data/exo-index.json

Download Fast¶

Écrire une fonction qui reçoit une liste d'URL et qui les téléchargents le plus rapidement possible.